<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    {{ count }}
    <!-- 
      在vue中，绑定事件使用的是 v-on:事件名="函数/表达式"
     -->
     <!-- 表达式 -->
     <button v-on:click="count+=1">加1</button>
     <!-- 定义事件
      规定自定义的事件必须写在 methods 选项中
    -->
     <button v-on:click="addCount">加10</button>
    <!-- 可以给自定义的事件传递参数 -->
     <button v-on:click="addCountParams(100)">加多少，看参数</button>
    <!-- v-on: 可以简写为@
      v-on:click    ===    @click
    -->
    <!-- 无参有默认的参数为事件对象
    有参数则没有默认的事件对象
    判断有无参数就是看@click的函数后有没有（）
    -->
    <button @click="getEvent">无参获取事件对象</button>
    <!-- 有参数但是想用事件对象
    传递$event -->
    <button @click="getParamsEvent(100, $event)">有参获取事件对象，传$event</button>
  </div>
</body>
<script src="lib/vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      count: 100
    },
    methods: {
      addCount () {
        this.count = this.count + 10
      },
      addCountParams (num) {
        this.count = this.count + num
      },
      getEvent (e) {
        console.log(e)
      },
      getParamsEvent (num, e) {
        console.log(num, e)
      }
    }
  })
</script>
</html>